<template>
    <div class="register-account">
        <el-form label-width="60px" :rules="rules" :model="register" hide-required-asterisk ref="formRef">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="register.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="register.password" show-password @blur="losefocus" @focus="getfocus" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="register.email" />
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <div class="code">
                    <el-input v-model="register.code" />
                    <el-button @click="getCode">获取<span v-if="verilfytime">{{ verilfytime + 's' }}</span></el-button>
                </div>
            </el-form-item>
        </el-form>
        <div class="register-control">
            <el-button type="primary" @click="submitForm">立即注册</el-button>
            <el-button type="warning" @click="resetForm">重置</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { rules } from "../config/register-config";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { userregister, usercode } from "@/api/userapi";

const register = reactive({
    username: "",
    password: "",
    email: "",
    code: "",
});
const emit = defineEmits(['getfocus', 'losefocus', 'returnTo']);

const verilfytime = ref<number>(0);
const formRef = ref<FormInstance>();
let timeer = null;

const submitForm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const res = await userregister({ user: JSON.stringify({ username: register.username, password: register.password, email: register.email, code: 10 }), code: register.code });
            if (res.code == 200) {
                ElMessage({
                    message: res.msg,
                    type: "success"
                })
                clearInterval(timeer);
                emit('returnTo');
                formRef.value.resetFields();
                return true;
            }
            ElMessage.error(res.msg);
        }
    });
};

const getfocus = () => {
    emit('getfocus');
}

const losefocus = () => {
    emit('losefocus');
}

const getCode = async () => {
    const res = await usercode({ email: register.email });
    if (res.code == 200) {
        ElMessage({
            message: res.msg,
            type: "success"
        })
        verilfytime.value = 300;
        clearInterval(timeer);
        timeer = setInterval(() => {
            verilfytime.value--;
        }, 1000)
        return true;
    }
    ElMessage.error(res.msg);
}

watch(() => verilfytime.value, () => {
    if (!verilfytime.value) {
        clearInterval(timeer);
    }
}, { deep: true })

const resetForm = () => {
    formRef.value.resetFields();
    clearInterval(timeer);
    verilfytime.value = 0;
};

</script>

<style scoped lang="less">
.register-account {
    .code {
        display: flex;

        .el-input {
            margin-right: 20px;
        }
    }

    .register-control {
        display: flex;
        justify-content: space-between;

        .el-button {
            margin: 0 30px;
        }
    }
}
</style>
